import './detail.scss'
import React, { Component } from 'react';
import { NavBar, Button, Toast, Swiper } from 'antd-mobile'
import { MessageOutline,TruckOutline, CalendarOutline} from 'antd-mobile-icons'
import * as service from '../../api'
class detail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            detailObj: {},
            bannerslist: []
        }
    }
    async componentDidMount() {
        // console.log(this.props.location.state);
        var res = await service.pro_detail({ id: this.props.location.state.id })
        // console.log(res);
        res.data.data.banners = res.data.data.banners[0].split(",").map((item) => {
            return { img: item };
        });
        this.setState({
            detailObj: res.data.data,
            bannerslist: res.data.data.banners
        })
    }
    onBack() {
        this.props.history.goBack()
    }
    togouwuche(){
        this.props.history.push('/index/gwc')
    }
    async addgouwuche(){
        var res=await service.cart_add({userid:window.localStorage.getItem('userid'),proid:this.props.location.state.id,num:1})
        // console.log(res);
        Toast.show({
            icon: 'success',
            content: '加入购物车成功',
          })
    }
    render() {
        return (
            <div className='detail'>
                <NavBar onBack={this.onBack.bind(this)} style={{
                    '--height': '50px',
                    '--border-bottom': '1px #eee solid',
                }}>商品详情
                </NavBar>
                <div className="main">
                    <Swiper className='myswiper' loop autoplay>
                        {
                            this.state.bannerslist.map((item, index) => {
                                return (
                                    <Swiper.Item key={index}>
                                        <img src={item.img} alt="" />
                                    </Swiper.Item>
                                )
                            })
                        }
                    </Swiper>
                </div>
                <div className="detailprice">
                    <div className="proname">
                        <Button size='mini' color='danger'>
                            嗨购超市
                        </Button>&nbsp;
                        {this.state.detailObj.proname}
                    </div>
                    <div className="price">
                        价格：&nbsp;<span id="p1">￥{this.state.detailObj.originprice}</span>
                        销量：&nbsp;<span id="p1">{this.state.detailObj.sales}</span>
                    </div>
                </div>

                <div className="addgouwu">
                    <div className='bottomsmall'>
                         <MessageOutline  className='tubiao'/>
                        客服
                    </div>
                    <div className='bottomsmall' onClick={()=>{this.togouwuche()}}>
                         <TruckOutline className='tubiao'/>
                        购物车
                    </div>
                    <div className='bottomsmall'>
                    <CalendarOutline className='tubiao'/>
                        店铺
                    </div>
                    <Button block shape='rounded' color='danger' onClick={()=>{this.addgouwuche()}}>
                        加入购物车
                    </Button>
                </div>

            </div>
        );
    }
}

export default detail;